<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基本表格模板</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../" scrollerY='false' />
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--基本选项卡start-->
<script type="text/javascript" src="../../libs/js/nav/basicTabModern.js"></script>
<!--基本选项卡end-->

<script src="../../libs/thirdparty/highcharts/js/highcharts.js"></script>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<style>
	body {
		background: #F2F3F7;
	}
</style>
</head>
<body>

<div class="page_content">
		 
    <div class="basicTabModern">
		<div name="开店工具" style="width:100%;">
			<div class="tab_content" style="display: block;">
				<ul>
					<li>
						<div class="icon_win">
							<img src="style/iocn_img01.png" alt="" />
						</div>
						<p>收银记账</p>
						<span>记一笔，不到三秒</span>
					</li>
					<li>
						<div class="icon_win" style="background: #fff url(style/iocn_bg02.png) no-repeat center center;">
							<img src="style/iocn_img02.png" alt="" />
						</div>
						<p>收银记账</p>
						<span>记一笔，不到三秒</span>
					</li>
					<li>
						<div class="icon_win" style="background: #fff url(style/iocn_bg03.png) no-repeat center center;">
							<img src="style/iocn_img03.png" alt="" />
						</div>
						<p>收银记账</p>
						<span>记一笔，不到三秒</span>
					</li>
					<li>
						<div class="icon_win" style="background: #fff url(style/iocn_bg04.png) no-repeat center center;">
							<img src="style/iocn_img04.png" alt="" />
						</div>
						<p>收银记账</p>
						<span>记一笔，不到三秒</span>
					</li>
					<li>
						<div class="icon_win" style="background: #fff url(style/iocn_bg05.png) no-repeat center center;">
							<img src="style/iocn_img05.png" alt="" />
						</div>
						<p>收银记账</p>
						<span>记一笔，不到三秒</span>
					</li>
					<li>
						<div class="icon_win" style="background: #fff url(style/iocn_bg06.png) no-repeat center center;">
							<img src="style/iocn_img06.png" alt="" />
						</div>
						<p>收银记账</p>
						<span>记一笔，不到三秒</span>
					</li>
					<li>
						<div class="icon_win" style="background: #fff url(style/iocn_bg07.png) no-repeat center center;">
							<img src="style/iocn_img07.png" alt="" />
						</div>
						<p>收银记账</p>
						<span>记一笔，不到三秒</span>
					</li>
					<div class="clear"></div>
				</ul>
			</div>
		</div>
		<div name="店铺概括" style="width:100%;">
			<div class="tab_content">
				<div class="top">
					<div class="title">
						<span>注册时间：2016（开店 23 天）</span>
						<div class="clear"></div>
					</div>
					<div class="icon_flat_rect">
					    <ul>
					        <li>
					            <img src="../../libs/icons/icon_flat/icon_img08.png" />
					            <div class="text">
					                <p>今日销售</p>
					                <p><span>¥ 1250</span></p>
					            </div>
					        </li>
					        <li style="background: #7CC422;">
					            <img src="../../libs/icons/icon_flat/icon_img09.png" />
					            <div class="text">
					                <p>本月销售</p>
					                <p><span>¥ 201250</span></p>
					            </div>
					        </li>
					        <li style="background: #FFA060;">
					            <img src="../../libs/icons/icon_flat/icon_img10.png" />
					            <div class="text">
					                <p>会员总数</p>
					                <p><span>3</span>个</p>
					            </div>
					        </li>
					        <li style="background: #FEC107;">
					            <img src="../../libs/icons/icon_flat/icon_img11.png" />
					            <div class="text">
					                <p>本月支出</p>
					                <p><span>¥ 23046</span></p>
					            </div>
					        </li>
					        <li style="background: #46D1E4;">
					            <img src="../../libs/icons/icon_flat/icon_img12.png" />
					            <div class="text">
					                <p>本月短信</p>
					                <p><span>25</span>条</p>
					            </div>
					        </li>
					        <li style="background: #60D0FE;">
					            <img src="../../libs/icons/icon_flat/icon_img13.png" />
					            <div class="text">
					                <p>商品总数</p>
					                <p><span>201250</span>个</p>
					            </div>
					        </li>
					        
					        <div class="clear"></div>
					    </ul>
					</div>
				</div>
				<div class="bottom">
					<div class="title">
						<span>每日销售概括</span>
						<div style="float: right;">
							<input type="radio" id="radio" name="radio" value="总销售" checked="checked" /><label for="radio" class="hand">总销售</label>
							<input type="radio" id="radio1" name="radio" value="会员" /><label for="radio1" class="hand">会员</label>
							<input type="radio" id="radio2" name="radio" value="零售" /><label for="radio2" class="hand">零售</label>
							<input type="radio" id="radio3" name="radio" value="全部" /><label for="radio3" class="hand">全部</label>
						</div>
						<div class="clear"></div>
					</div>
					<div id="container" style="width: 98%; height: 400px;"></div>
				</div>
			</div>
		</div>
		
	</div>
 </div> 
	
	
<script type="text/javascript">
	$(function() {
		$('#container').highcharts({
			chart: {
				zoomType: 'xy'
			},
			title: {
				text: '销售概览',
				style: {
					color: '#03A9F5'
				}
			},
			subtitle: {
				text:""
			},
			xAxis: [{
				categories: ['2016/03/07', '2016/03/11', '2016/03/15', '2016/03/19', '2016/03/23', '2016/03/27', '2016/03/31', '2016/04/04', '2016/04/07', '2016/04/12', '2016/04/17', '2016/04/22']
			}],
			yAxis: [ {
				title: {
					text: '',
					style: {
						color: ' '
					}
				},
				labels: {
					format: '{value}',
					style: {
						color: ''
					}
				},
				opposite: false
			}],
			tooltip: {
				shared: true
			},
			legend: {
				layout: 'vertical',
				align: 'left',
				x: 120,
				verticalAlign: 'bottom',
				y: 100,
				floating: true,
				backgroundColor: '#FFFFFF'
			},
			series: [ {
				name: '销售',
				type: 'line',
				data: [440, 490, 495, 345, 382, 415, 592, 565, 633, 683, 639, 720],
				color: '#7BC623'
			}]
		});
	
	});
	var fixedObj=100;
	function customHeightSet(contentHeight,contentWidth){
	    $(".tab_content").height(contentHeight-fixedObj);
	}
</script>	
</body>
</html>